import { defineComponent, ref } from 'vue'
import { NButton, NDataTable, NPagination, NSpace } from 'naive-ui'
import Card from '@/components/card'
import { useColumns } from './use-columns'
import { useTable } from './use-table'
import UserDetailModal from '../../dialog/user-detail-modal'
import ModUserProRoleModal from '../../dialog/mod-user-pro-role-modal'
import AddProMenberModal from '../../dialog/add-pro-menber-modal'

const ProUserManageTab = defineComponent({
  name: 'ProUserManageTab',
  props: {
    proId: {
      type: Number,
      required: false
    }
  },
  setup() {
    const showAddProMenberModalRef = ref(false)
    const { state, updateList, changePage, changePageSize, onOperationClick } =
      useTable()
    const { columnsRef } = useColumns(onOperationClick)

    return {
      state,
      columnsRef,
      onUpdatedList: updateList,
      changePage,
      changePageSize,
      showAddProMenberModalRef
    }
  },
  mounted() {
    this.state.proId = this.proId
      ? this.proId
      : window.$store.state.userInfo.currentProjectId
    this.onUpdatedList()
  },
  methods: {
    handleAddProMenberModalShowChange() {
      this.showAddProMenberModalRef = false
    },
    handleModUserProRoleModalShowChange() {
      this.state.modProRolesModalShow = false
    },
    handleUserDetailModalShowChange() {
      this.state.userDetailModalShow = false
    },
    onAddProMenber() {
      this.showAddProMenberModalRef = true
    }
  },
  render() {
    return (
      <>
        <NSpace vertical>
          <Card>
            <NSpace justify='space-between'>
              <NButton onClick={this.onAddProMenber} type='info' size='small'>
                {window.$t('project.addProMenber')}
              </NButton>
            </NSpace>
          </Card>
          <Card>
            <NSpace vertical>
              <NDataTable
                row-class-name='items'
                columns={this.columnsRef.columns}
                size='small'
                data={this.state.list}
                loading={this.state.loading}
                scrollX={this.columnsRef.tableWidth}
              />
              <NSpace justify='end'>
                <NPagination
                  v-model:page={this.state.page}
                  v-model:page-size={this.state.limit}
                  item-count={this.state.count}
                  show-size-picker
                  page-sizes={[10, 30, 50]}
                  show-quick-jumper
                  on-update:page={this.changePage}
                  on-update:page-size={this.changePageSize}
                />
              </NSpace>
            </NSpace>
          </Card>
        </NSpace>
        <AddProMenberModal
          showModal={this.showAddProMenberModalRef}
          onModalShowChange={this.handleAddProMenberModalShowChange}
          onRefreshList={this.onUpdatedList}
          proId={this.state.proId}
        ></AddProMenberModal>
        <ModUserProRoleModal
          showModal={this.state.modProRolesModalShow}
          onModalShowChange={this.handleModUserProRoleModalShowChange}
          onRefreshList={this.onUpdatedList}
          userId={this.state.currentRecord.id}
        ></ModUserProRoleModal>
        <UserDetailModal
          showModal={this.state.userDetailModalShow}
          onModalShowChange={this.handleUserDetailModalShowChange}
          userInfo={this.state.currentRecord}
        ></UserDetailModal>
      </>
    )
  }
})

export default ProUserManageTab
